<script setup>
import { AddMusic, Like, ListAdd, Me, Pause, PlayOne } from '@icon-park/vue-next'
import { ref } from 'vue'
import '@/assets/common/common.scss'
import { useUserState } from '@/stores/index.js'
import { useRouter } from 'vue-router'
import { isCode1 } from '@/utils/response.js'
import { getListService } from '@/api/music.js'
import MusicPlayBottom from '@/components/music/MusicPlayBottom.vue'
import { successMsg, warningMsg } from '@/utils/sendMsgUtils.js'
import { delSongService, likeSongService } from '@/api/userLike.js'

const userState = useUserState()
const router = useRouter()

const music = ref({
  index: '',
  id: ''
})
const sendMusic = (m, index) => {
  music.value = m
  music.value.index = index
  music.value.time = Date.now()
}

const tableData = ref([])
const getList = async () => {
  const resp = await getListService()
  if (isCode1(resp)) {
    tableData.value = resp.data
  }
}
getList()
const playFirst = async () => {
  sendMusic(tableData.value[0], 0)
}
const nextMusic = () => {
  // 判断是否有下一首
  if (music.value.index + 1 < tableData.value.length) {
    // 获取下一首歌曲的索引
    let nextIndex = music.value.index + 1
    // 更新音乐并播放
    sendMusic(tableData.value[nextIndex], nextIndex)
  } else {
    warningMsg('已经到达尽头咯！')
  }
}
const preMusic = () => {
  // 判断是否有下一首
  if (music.value.index - 1 > 0) {
    // 获取下一首歌曲的索引
    let preIndex = music.value.index - 1
    // 更新音乐并播放
    sendMusic(tableData.value[preIndex], preIndex)
  } else {
    warningMsg('已经到达尽头咯！')
  }
}
const likeSong = async (sid, index) => {
  const resp = await likeSongService(sid)
  if (isCode1(resp)) {
    tableData.value[index].isLove = true
    successMsg(resp.data)
  }
}
const delSong = async (sid, index) => {
  const resp = await delSongService(sid)
  if (isCode1(resp)) {
    tableData.value[index].isLove = false
    successMsg(resp.data)
  }
}
const clickD = async (row, column) => {
  if (column.no === 1 || column.no === 6) return
  await router.push('/details?id=' + row.id)
}
</script>

<template>
  <div class="icon-center me-top">
    <div>
      <me class="icon-center" theme="outline" size="80" fill="#fff" :strokeWidth="3" />
      <p class="username">Hello,{{ userState.username }}~^o^ !</p>
    </div>
  </div>

  <div class="content">
    <div class="btns">
      <el-button type="primary" @click="playFirst">
        <play-one class="icon-center" theme="outline" size="24" fill="#ffffff" />&nbsp;
        播放
      </el-button>
      <el-button type="primary" @click="router.push('/add')">
        <add-music class="icon-center" theme="outline" size="24" fill="#ffffff" />&nbsp;
        添加歌曲
      </el-button>
      <el-button type="primary">
        <list-add class="icon-center" theme="outline" size="24" fill="#ffffff" />&nbsp;
        批量操作
      </el-button>
    </div>
    <div class="table-list">
      <el-table :data="tableData" stripe @cell-click="clickD" style="width: 100%">
        <el-table-column type="index" align="center" label="顺序" />
        <el-table-column width="80" align="center" label="收藏">
          <template #default="scope">
            <div class="icon-center">
              <like v-if="!scope.row.isLove"
                    style="cursor: pointer"
                    theme="outline"
                    size="18"
                    :strokeWidth="5"
                    @click.prevent="likeSong(scope.row.id, scope.$index)" />
              <like v-else
                    style="cursor: pointer"
                    theme="two-tone"
                    size="20"
                    :fill="['#74759b' ,'#f1939c']"
                    @click.prevent="delSong(scope.row.id, scope.$index)" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="歌曲" />
        <el-table-column prop="artist" label="歌手" />
        <el-table-column prop="album" label="专辑" />
        <el-table-column prop="duration" label="时长" />
        <el-table-column width="80" align="center" label="播放">
          <template #default="scope">
            <div class="icon-center">
              <play-one v-if="scope.$index !== music.index"
                        style="cursor: pointer"
                        @click.prevent="sendMusic(scope.row, scope.$index)"
                        theme="outline"
                        size="24" />
              <pause @click.prevent="sendMusic(scope.row, -1)" v-else style="cursor: pointer" theme="outline" size="24" />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>

  <MusicPlayBottom @pre="preMusic" :music="music" @next="nextMusic"></MusicPlayBottom>
</template>


<style scoped>
.me-top {
  width: 100%;
  height: 400px;
  background-size: cover;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("@/assets/me-top.png") no-repeat center;

  div {
    .username {
      color: #FFFFFF;
      font-size: 28px;
      margin: 0;
    }
  }
}

.content {
  width: 85%;
  margin: 10px auto;

  .btns {
    margin: 20px 0;
  }
}
</style>
